const HtmlWebpackPlugin = require('html-webpack-plugin');
// 这个在webpack官网插件找，先安装
// npm install --save-dev html-webpack-plugin
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
	 mode: 'development',
	 // 开发模式
	// 入口文件将哪个js文件进行打包
	// 不建议写相对路径写绝对路径 运行环境在node.js
	entry: path.resolve(__dirname, 'src/aaa.js'),
	output: {
		// 默认出口文件目录dist
		path: path.resolve(__dirname, 'dist'),
		// 出口文件名
		filename: 'login/index.js',
		clean: true
		// 清空dist目录
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: 'login/index.html',
			template: path.resolve(__dirname, 'public/index.html'),
			title: "登录页",
		}),
		new MiniCssExtractPlugin({
			filename: 'login/index.css'
			// MiniCssExtractPlugin
		})
	],
	module: {
		rules: [{
				test: /\.css$/i,
				// use: ['style-loader', 'css-loader'],
				use: [MiniCssExtractPlugin.loader, "css-loader"],
			},
			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset',
				generator: {
					filename: 'static/[hash][ext][query]'

				}
			},
		]
	},
	optimization: {
		minimizer: [
			// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
			`...`,
			new CssMinimizerPlugin(),
		],
	},
	// 压缩优化配置

};